<template>
  <div class="content-list" v-if="contentData" ref="contentList" @click="addHistoryData">
    <div class="hot" v-if="contentData.hot">
      <div class="hot-icon"></div>
      <div class="hot-text">热门</div>
    </div>
    <div class="content-top-user">
      <div class="user-left">
        <div class="imgbox" @click="goToUserInside">
          <img class="auto-img" :src="contentData.user.thumb" alt="" />
        </div>
        <div class="user-name">{{ contentData.user.login }}</div>
      </div>
      <div class="user-right">
        <div class="follow-icon" @click="toFollow" v-if="this.$route.name !='userInside'">
          {{ isFollow == true ? "已关注" : "关注" }}
        </div>
        <div class="delete-icon" @click="deleteData">
          <van-icon name="cross" />
        </div>
      </div>
    </div>
    <div class="title" :style="{ fontStyle: contentData.format == 'video' }" v-html="contentData.content">
    </div>
    <div class="video-box" v-if="contentData.format == 'video'">
      <div class="bg-click" @click="goToVideoInside"></div>
      <img class="bg" :src="contentData.pic_url" alt="" />
      <div class="bg-blur"></div>
      <video
        ref="video"
        muted
        :src="contentData.high_url"
        controls
        autoplay
      ></video>
    </div>
    <div class="photo-box" v-if="contentData.attachments">
      <div
        class="imgbox"
        v-for="(item, index) in contentData.attachments"
        :key="index"
        @click="PreviewImage(index)"
      >
        <img
          class="auto-img"
          :src="item.high_url"
          alt=""
          v-if="item.format == 'image'"
        />
        <video
          muted
          :src="item.high_url"
          autoplay
          loop
          v-if="item.format == 'gif'"
        ></video>
      </div>
    </div>
    <div
      class="hot-comment-box"
      v-if="contentData.hot_comment && this.$route.name != 'comment'"
    >
      <div class="content-top-user">
        <div class="user-left">
          <div class="imgbox">
            <img
              class="auto-img"
              :src="contentData.hot_comment.user.thumb"
              alt=""
            />
          </div>
          <div class="user-name">{{ contentData.hot_comment.user.login }}</div>
        </div>
        <div class="user-right">
          {{ contentData.hot_comment.like_count }} 赞
        </div>
      </div>
      <div class="content-text">{{ contentData.hot_comment.content }}</div>
    </div>
    <div class="bottom-icon">
      <div class="bottom-icon-left">
        <div class="icon like" :class="{ likeActive: isLike }" @click="toLike">
          <div class="like-count">{{ contentData.votes.up }}</div>
        </div>
        <div
          class="icon dislike"
          :class="{ dislikeActive: isDislike }"
          @click="toDislike"
        ></div>
      </div>
      <div class="bottom-icon-right">
        <div class="icon comment" @click="goToComment">
          <div class="comment-count">
            {{
              contentData.comments_count > 0
                ? contentData.comments_count
                : "评论"
            }}
          </div>
        </div>
        <div class="icon share" @click="shareHandel()">
          <div class="share-count">
            {{ contentData.share_count > 0 ? contentData.share_count : "分享" }}
          </div>
        </div>
      </div>
    </div>
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <router-view></router-view>
  </div>
</template>

<script>
import { ref } from "vue";
import { Toast, ImagePreview } from "vant";
export default {
  setup() {
    const showShare = ref(false);
    const options = [
      { name: "微信", icon: "wechat" },
      { name: "微博", icon: "weibo" },
      { name: "复制链接", icon: "link" },
      { name: "分享海报", icon: "poster" },
      { name: "二维码", icon: "qrcode" },
    ];

    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };

    return {
      options,
      onSelect,
      showShare,
    };
  },
  props: {
    allContentData: {},
    contentData: {},
    isAutoplay: {},
    loading: {},
    isFollow: {},
    isLike: {},
    isDislike: {},
    index: {},
  },
  data() {
    return {
      contentListHeight: 0,
      fontStyle: {
        textOverflow: "ellipsis",
        overflow: "hidden",
        whiteSpace: "nowrap",
      },
      playState: false,
    };
  },
  watch: {
    isAutoplay(newval) {
      if (newval == true && this.contentData.format == "video") {
        this.$refs.video.play();
        this.playState = true;
      } else if (newval == false && this.contentData.format == "video") {
        this.$refs.video.pause();
        this.playState = false;
      }
    },
    loading(newval) {
      if (newval == false) {
        this.toAutoplay();
      }
    },
  },
  created() {
    this.$nextTick(() => {
      this.toAutoplay();
    });
  },
  methods: {
    //自动播放传送高度
    toAutoplay() {
      if (this.$refs.contentList) {
        this.contentListHeight = this.$refs.contentList.clientHeight;
        this.$emit("getVideoHeight", this.contentListHeight);
      }
    },
    //关注
    toFollow() {
      let token = window.localStorage.getItem("token");
      if (!token) {
        this.$router.push({ name: "beforeLogin" });
      } else {
        this.$emit("getFollowState");
      }
    },
    //点赞
    toLike() {
      this.$emit("getLikeState");
    },
    //踩
    toDislike() {
      this.$emit("getDislikeState");
    },
    //分享
    shareHandel() {
      let token = window.localStorage.getItem("token");
      if (!token) {
        this.$router.push({ name: "beforeLogin" });
      } else {
        this.showShare = true
        this.$emit("addShareCount");
      }
    },
    //跳转视频详情页
    goToVideoInside() {
      let data = this.allContentData.filter(item => {
        return item.format=='video'
      })
      window.localStorage.setItem(
        "VideoContentData",
        JSON.stringify(data)
      );
      this.$router.push({ name: "VideoInside", params: { index: this.index } });
      // if (this.playState) {
      //   this.$refs.video.play();
      // } else if (!this.playState) {
      //   this.$refs.video.pause();
      // }
      // this.playState = !this.playState;
    },
    //图片浏览
    PreviewImage(index) {
      let imgs = [];
      this.contentData.attachments.forEach((item) => {
        imgs.push(item.high_url);
      });
      ImagePreview({
        images: imgs,
        startPosition: index,
      });
    },
    //删除
    deleteData() {
      let token = window.localStorage.getItem("token");
      if (!token) {
        this.$router.push({ name: "beforeLogin" });
      } else {
        this.$emit("deleteData");
      }
    },
    //前往评论区
    goToComment() {
      this.$emit("goTocomment");
    },
    //前往个人主页
    goToUserInside() {
      if (this.$route.name != "userInside") {
        this.$router.push({
          name: "userInside",
          params: { id: this.contentData.user.id },
        });
      }
    },
    //添加历史观看数据
    addHistoryData() {
      let historyData = JSON.parse(window.localStorage.getItem('historyData'))
      if (!historyData) {
        let historyData=[]
        historyData.unshift(this.contentData)
        window.localStorage.setItem('historyData',JSON.stringify(historyData))
      }else{
        let idArr=[]
        historyData.forEach(item => {
          if (idArr.indexOf(item.id)==-1){
            idArr.push(item.id)
          }
        })
        if (idArr.indexOf(this.contentData.id)==-1) {
          historyData.unshift(this.contentData)
          window.localStorage.setItem('historyData',JSON.stringify(historyData))
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content-list {
  width: 100%;
  margin-bottom: 25px;
  .hot {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .hot-icon {
      width: 15px;
      height: 15px;
      background-color: red;
      border-radius: 999px;
    }
    .hot-text {
      color: #bbb;
      font-size: 14px;
    }
  }
  .content-top-user {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .user-left {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .imgbox {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        margin-right: 10px;
        overflow: hidden;
      }
      .user-name {
        color: #666;
        font-size: 14px;
      }
    }
    .user-right {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      width: 62px;
      .follow-icon {
        width: 50px;
        height: 22px;
        flex: 0 0 50px;
        border-radius: 999px;
        text-align: center;
        background-color: #eee;
        line-height: 22px;
        font-weight: 600;
        margin-left: -10px;
      }
      .delete-icon {
        margin-left: 10px;
        color: #aaa;
      }
    }
  }
  .title {
    font-size: 14px;
    margin: 15px 0 10px;
    width: 100%;
    line-height: 15px;
  }
  .video-box {
    width: 100%;
    height: 300px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    .bg-click {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 60px;
      z-index: 20;
    }
    .bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -2;
    }
    .bg-blur {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(30px);
      z-index: -1;
    }
    video {
      width: 100%;
      height: 100%;
      z-index: 10;
    }
    .total-time {
      width: 35px;
      height: 20px;
      position: absolute;
      bottom: 5px;
      right: 5px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 999px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 20px;
    }
  }
  .photo-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .imgbox {
      width: calc(33.3% - 10px);
      margin-right: 5px;
      margin-bottom: 5px;
      position: relative;
      img {
        display: block;
        width: 100%;
        height: 100px;
        margin: auto 0;
      }
      video {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .hot-comment-box {
    width: 100%;
    background-color: #eee;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    margin: 10px 0;
    .content-top-user {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      margin-bottom: 10px;
      color: #aaa;
      .user-left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .imgbox {
          width: 20px;
          height: 20px;
          border-radius: 999px;
          margin-right: 10px;
          overflow: hidden;
        }
        .user-name {
          color: #666;
          font-size: 14px;
        }
      }
      .user-right {
        text-align: center;
      }
    }
    .content-text {
      font-size: 14px;
    }
  }
  .bottom-icon {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    .bottom-icon-left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon {
        width: 35px;
        height: 35px;
        border-radius: 999px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        position: relative;
        &.like {
          margin-right: 30px;
          background-image: url(@/assets/images/home/xhP.png);
          &.likeActive {
            background-image: url(@/assets/images/home/utK.png);
          }
          .like-count {
            position: absolute;
            font-size: 12px;
            left: 35px;
            top: 12px;
            font-weight: 600;
          }
        }
        &.dislike {
          background-image: url(@/assets/images/home/qOC.png);
          &.dislikeActive {
            background-image: url(@/assets/images/home/Dfk.png);
          }
        }
      }
    }
    .bottom-icon-right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 0 0 120px;
      .icon {
        width: 35px;
        height: 35px;
        border-radius: 999px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        position: relative;
        &.comment {
          margin-right: 30px;
          background-image: url(@/assets/images/home/u0q.png);
          .comment-count {
            position: absolute;
            font-size: 12px;
            left: 35px;
            top: 12px;
            font-weight: 600;
            height: 12px;
            flex: 0 0 26px;
            width: 26px;
          }
        }
        &.share {
          margin-right: 30px;
          background-image: url(@/assets/images/home/Vdz.png);
          .share-count {
            position: absolute;
            height: 12px;
            flex: 0 0 26px;
            width: 26px;
            font-size: 12px;
            left: 35px;
            top: 12px;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>